<style>
  .el-icon-copy-document {

    font-weight: bold;
  }

  .el-icon-plus {
    color: #67c23a;
    font-weight: bold;
  }

  .el-icon-edit {
    font-weight: bold;
  }

</style>
<template>
  <page-content>
    <space class="my-1">
      <el-button style="margin-right: 20px" @click="globalAdd()" icon="el-icon-circle-plus-outline">添加游戏</el-button>
      <el-select
        v-model=select.gameGroup
        placeholder="游戏分组"
        filterable
        clearable
        style="width: 180px"
        class="filter-item"
      >
        <el-option
          v-for="item in groupOptions"
          :key="item.key"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model=select.gameName
        placeholder="游戏名称"
        filterable
        clearable
        class="filter-item"
        style="width: 180px"
      >
        <el-option
          v-for="item in gameOptions"
          :key="item.key"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model=select.status
        filterable
        clearable
        placeholder="状态"
        style="width: 160px"
        class="filter-item"
      >
        <el-option
          v-for="item in statusOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model=select.company
        placeholder="公司"
        filterable
        clearable
        style="width: 200px"
        class="filter-item"
      >
        <el-option
          v-for="item in companyOptions"
          :key="item.key"
          :label="item.company_name"
          :value="item.id"
        />
      </el-select>

      <el-select
        v-model=select.sdk
        placeholder="sdk类型"
        filterable
        clearable
        style="width: 160px"
        class="filter-item"
      >
        <el-option
          v-for=" item  in sdkTypeOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button id="search" :icon="icon" @click="search()">搜索</el-button>
    </space>

    <!--   添加回调地址-->
    <el-dialog
      title="添加回调地址"
      :visible.sync="dialogPayBack"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form :model="form">
        <el-form-item label="游戏名称" :label-width="formLabelWidth">
          <el-input style="width: 200px" v-model="payBackName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="回调地址" :label-width="formLabelWidth">
          <el-input v-model="form.payBackUrl" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPayBack = false">取 消</el-button>
        <el-button type="primary" @click="addPayBack()">确 定</el-button>
      </div>
    </el-dialog>

<!--    操作记录 -->
    <el-dialog
      title="操作记录"
      :visible.sync="dialogFormVisible3"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="80%"
    >
      <opreate :content="opreateDatas" @page="getOpreate(arguments)"></opreate>

    </el-dialog>

    <!--编辑游戏名称-->
    <el-dialog
      title="编辑游戏名称"
      :visible.sync="dialogName"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form :model="form">
        <el-form-item label="游戏名称" :label-width="formLabelWidth">
          <el-input style="width: 200px" v-model="payBackName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="游戏修改名称" :label-width="formLabelWidth">
          <el-input v-model="form.editGame" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogName = false">取 消</el-button>
        <el-button type="primary" @click="editGameName()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加游戏-->
    <el-dialog
      title="添加游戏"
      :visible.sync="dialogFormVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form :model="form">
        <el-form-item label="游戏分组" :label-width="formLabelWidth">
          <el-select v-model="form.groupName" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="游戏名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="cp名称" :label-width="formLabelWidth">
          <el-select v-model="form.cpName" filterable placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.company_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="对接参数"
      :visible.sync="dialogFormVisible2"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      center
    >
      <el-form>
        <el-form-item label="游戏名称：" :label-width="formLabelWidth">
          <span style="font-size: 18px">{{this.get.name}}</span>
        </el-form-item>
        <el-form-item label="app_id(游戏ID)：" :label-width="formLabelWidth">
          <span style="font-size: 18px">{{this.get.id}}</span>
        </el-form-item>
        <el-form-item label="app_key(游戏key):" :label-width="formLabelWidth">
          <span style="font-size: 18px">{{this.get.app_key}}</span>
        </el-form-item>
      </el-form>
    </el-dialog>

    <a-table
      row-key="id"
      :data-source="gameGame"
      bordered
      :scroll="{ x: 600 }"
      :pagination="false"
      :loading="listLoading"
      :sortDirections="['descend', 'ascend']"

    >
      <a-table-column title="ID" data-index="id" :width="60"/>
      <a-table-column title="游戏名称" :width="250">
        <template #default="record">
          <div>
            <div class="demo-image__preview" style="margin-right: 10px">
              <el-image
                style="width: 40px; height: 40px;float: left;margin-right: 10px"
                :src="record.icon"
                :preview-src-list=[record.icon]
              >
                <div slot="error" class="image-slot">
                </div>

                <!--              <div slot="placeholder" class="image-slot">-->
                <!--                加载中<span class="dot">...</span>-->
                <!--              </div>-->
              </el-image>
            </div>
            <div style="line-height: 35px">
              <p style="font-weight:500;float: left">{{record.name}}
              </p>
              <el-link style="margin-left: 10px;" title="编辑游戏地址" type="primary" icon="el-icon-edit"
                       @click="showEditGame(record.id,record.name)"></el-link>

            </div>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="分组名" data-index="pName"/>
      <a-table-column title="公司名称" data-index="cName"  :width="250" />
      <a-table-column title="状态">
        <template #default="record">
          <el-popconfirm
            v-if="record.status=='上线'"
            @confirm="confirmStatus(record.id,3)"
            title="确定下线吗？"

          >
            <el-button slot="reference" type="primary" size="mini">{{record.status}}</el-button>
          </el-popconfirm>
          <el-popconfirm
            v-else-if="record.status=='接入中'"
            @confirm="confirmStatus(record.id,2)"
            title="确定上线吗？"

          >
            <el-button slot="reference" size="mini">{{record.status}}</el-button>
          </el-popconfirm>
          <el-popconfirm
            v-else
            @confirm="confirmStatus(record.id,2)"
            title="确定上线吗？"

          >
            <el-button type="info" slot="reference" size="mini">{{record.status}}</el-button>
          </el-popconfirm>
        </template>
      </a-table-column>
      <a-table-column title="上线时间" data-index="created_at" default-sort-order="descend"/>
      <a-table-column title="sdk类型" data-index="classify"/>
      <a-table-column title="回调地址">
        <template #default="record">
          <div v-if="!record.cp_payback_url">
            <el-tooltip class="item" effect="dark" content="添加回调地址" placement="bottom-start">
              <el-link type="primary" icon="el-icon-plus" @click="showPayBack(record.id,record.name)"></el-link>
            </el-tooltip>
          </div>
          <div v-else>
            <el-tooltip class="item" effect="dark" content="复制回调地址" placement="bottom-start">
              <el-link type="primary" icon="el-icon-copy-document" @click="copy(record.cp_payback_url,1)"></el-link>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="编辑回调地址" placement="bottom-start">
              <el-link style="margin-left: 10px" type="primary" icon="el-icon-edit"
                       @click="showPayBack(record.id,record.name,record.cp_payback_url)"></el-link>
            </el-tooltip>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="母包地址">
        <template #default="record">
          <el-tooltip v-if="!record.package_url" class="item" effect="dark" content="添加母包地址" placement="bottom-start">
            <el-link type="primary" icon="el-icon-plus"></el-link>
          </el-tooltip>
          <el-tooltip v-else class="item" effect="dark" content="复制母包地址" placement="bottom-start">
            <el-link type="primary" icon="el-icon-copy-document" @click="copy(record.package_url,2)"></el-link>
          </el-tooltip>
        </template>
      </a-table-column>
      <a-table-column title="操作 ">
        <template #default="record">
          <space>
            <a-popover content="对接参数" trigger="hover">
              <el-link @click="getGameParams(record.id)">
                <a-icon type="swap"/>
              </el-link>
            </a-popover>
            <a-popover content="编辑" trigger="hover">
              <router-link :to="`/game/games/${record.id}/edit`">
                <a-icon style="font-size: 16px" type="edit"/>
              </router-link>
            </a-popover>
            <a-popover content="删除" trigger="hover">
              <lz-popconfirm :confirm="destroyGameGames(record.id)">
                <a class="error-color" href="javascript:void(0);">
                  <a-icon type="delete"/>
                </a>
              </lz-popconfirm>
            </a-popover>
            <a-popover content="操作记录" trigger="hover">
              <el-link @click="getOpreate(record.id)" >
                <a-icon type="clock-circle"/>
              </el-link>
            </a-popover>
          </space>
        </template>
      </a-table-column>
    </a-table>
    <lz-pagination :page="page"/>
  </page-content>
</template>

<script>
  import LzPagination from '@c/LzPagination'
  import LzPopconfirm from '@c/LzPopconfirm'
  import PageContent from '@c/PageContent'
  import SearchForm from '@c/SearchForm'
  import Space from '@c/Space'
  import opreate from './opreate.vue'

  import {
    destroyGameGames,
    getGameGames,
    getGroups,
    storeGameGames,
    update,
    getGameParams,
    opreateData
  } from '@/api/game/games'
  import {removeWhile} from '@/libs/utils'

  export default {
    name: 'Index',
    scroll: true,
    components: {
      LzPopconfirm,
      PageContent,
      LzPagination,
      Space,
      SearchForm,
      opreate,
    },
    data() {
      return {
        formLabelSize: '18px',
        payBackName: '',
        icon: "el-icon-search",
        listLoading: false,
        dialogPayBack: false,
        dialogFormVisible: false,
        dialogName: false,
        dialogFormVisible2: false,
        dialogFormVisible3: false,
        formLabelWidth: '140px',
        form: {
          name: '',
          cpName: '',
          groupName: '',
          payBackUrl: '',
          id: '',
          editGame: '',
        },
        select: {
          gameName: '',
          gameGroup: '',
          status: '',
          company: '',
          sdk: '',
        },
        get: {
          name: '',
          app_key: '',
          id: '',
        },
        options: [],
        options1: [],
        groupOptions: [],
        gameOptions: [],
        statusOptions: [],
        companyOptions: [],
        sdkTypeOptions: [],
        opreateDatas: {
          data:[],
          meta:[],

        },
        gameGame: [],
        page: null,
      }
    },
    methods: {
      destroyGameGames(id) {
        return async () => {
          await destroyGameGames(id).then((response) => {
            this.$message.success(response.data)
            this.gameGame = removeWhile(this.gameGame, (i) => i.id === id)
            // eslint-disable-next-line handle-callback-err
          }).catch(function () {
            this.$message.error('请求失败')
          })
        }
      },
      getGameParams(id) {
        getGameParams(id).then((response) => {
          this.dialogFormVisible2 = true;
          this.get = response.data.[0]
        })

      },
      globalAdd() {
        this.dialogFormVisible = true
        getGroups().then((response) => {
          this.options = response.data.res
          this.options1 = response.data.to
        }).catch(function () {
          this.$message.error('请求失败')
        })
      },
      search() {
        this.icon = 'el-icon-loading'
        this.listLoading = true

        this.hand({
          query: this.select
        })

      },
      confirmStatus(id, status) {
        update(id, {status: status}).then((response) => {
          if (response.status == 200) {
            this.$message.success(response.data)
            this.hand(this.$route)
          } else {
            this.$message.error(response.data)
          }
        }).catch(function () {
          this.$message.error('请求失败');
        })


      },
      submit() {
        if (this.form.name == '' || this.form.cpName == '' || this.form.groupName == '') {
          this.$message.error('不能为空')
        }
        storeGameGames({
          name: this.form.name,
          cp_id: this.form.cpName,
          pid: this.form.groupName,
        }).then((response) => {
          if (response.status = 200) {
            this.$message.success(response.data)
            this.dialogFormVisible = false
            this.hand(this.$route)
          } else {
            this.$message.error(response.data)
          }
        }).catch(function () {
          this.$message.error('请求失败')
        })
      },
      getOpreate(s){
        if( s%1 === 0){
          var res = {
            data:{
              id:s
            }
          }
        }else{
       res =
         {
           data:s.[0]
         }
        }
        opreateData(res).then((response)=>{
        this.opreateDatas = response.data
        })
        this.dialogFormVisible3 =true;
      },
      copy(data, type) {
        let url = data;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value)
        document.execCommand("Copy"); // 执行浏览器复制命令
        if (type == 1) {
          var message = '复制回调地址成功'
        } else {
          message = '复制母包地址成功'

        }
        this.$notify({
          title: '成功',
          message: message,
          type: 'success'
        });
        oInput.remove()
      },
      addPayBack() {
        if (this.form.payBackUrl == '') {
          this.$message.error('不能为空');
        }
        update(this.form.id, {cp_payback_url: this.form.payBackUrl}).then((response) => {
          if (response.status == 200) {
            this.$message.success(response.data)
            this.hand(this.$route)
            this.dialogPayBack = false
          } else {
            this.$message.error(response.data)
          }
        }).catch(function () {
          this.$message.error('请求失败');

        })

      },
      showPayBack(id, name, url = '') {
        this.payBackName = name
        this.dialogPayBack = true
        this.form.payBackUrl = url
        this.form.id = id

      },
      showEditGame(id, name) {
        this.payBackName = name
        this.dialogName = true
        this.form.id = id
        this.form.editGame = name
      },
      editGameName() {
        if (this.form.editGame == '') {
          this.$message.error('不能为空');
        }
        update(this.form.id, {name: this.form.editGame}).then((response) => {
          if (response.status == 200) {
            this.$message.success(response.data)
            this.hand(this.$route)
            this.dialogName = false
          } else {
            this.$message.error(response.data)
          }
        }).catch(function () {
          this.$message.error('请求失败');
        })


      },


      async hand(newVal) {
        await getGameGames(newVal.query).then((response) => {
          var response = response.data
          this.gameGame = response.data.data
          this.statusOptions = response.status
          this.companyOptions = response.company
          this.gameOptions = response.name
          this.groupOptions = response.gameGroup
          this.sdkTypeOptions = response.sdkType
          this.page = {
            current_page: response.data.current_page,
            last_page: response.data.last_page,
            per_page: response.data.per_page,
            total: response.data.total,
          }
          this.icon = 'el-icon-search'
          this.listLoading = false
        })
        this.$scrollResolve()
      },
    },
    watch: {
      $route: {
        async handler(newVal) {
          this.hand(newVal)
        },
        immediate: true,
      },
    },
  }
</script>
